<template>
	<view class="page">
		<view class="content-box">
			<view class="item-nearby" v-for="(item,index) in list" :key="index" @click="goToDetail(item.id, item.shopname)">
				<view class="left-nearby-img-box"><image :src="$wanlshop.oss(item.avatar)" mode=""></image></view>
				<view class="right-content">
					<view class="right-l-title">
						<view class="title">{{ item.shopname }}</view>
						<view class="desc">距离{{ item.distance }}</view>
					</view>
					<u-icon name="arrow-right" color="#909090" size="40"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				longitude: '',
				latitude: '',
				list: []
			}
		},
		onLoad() {
			this.getLocation();
		},
		methods: {
			//获取附近商圈
			getNearbyShop() {
				const self = this;
				let { longitude, latitude, page } = this;
				let data = { longitude, latitude, page };
				this.$api.post({
					url: '/wanlshop.shop/lis',
					data,
					success(res) {
						self.total = res.total;
						self.list.push(...res.data);
					}
				})
			},
			
			getLocation() {
				const self = this;
				uni.getLocation({
					success(res) {
						let { longitude, latitude} = res;
						self.longitude = longitude;
						self.latitude = latitude
						self.getNearbyShop();
					}
				})
			},
			
			//商圈详情
			goToDetail(id, name) {
				uni.navigateTo({
					url: `/pages/page/shopadmin/circle/nearbyDetail?id=${id}&name=${name}`
				})
			}
		},
		onReachBottom() {
			let { list, total } = this;
			if(list.length < total) {
				++this.page;
				this.getNearbyShop();
			}
		}
	}
</script>

<style scoped>
.page {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF !important;
	overflow-y: scroll;
}
.content-box {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.item-nearby {
	width: 100%;
	display: flex;
	border-bottom: solid 1rpx #F4F4F4;
	padding: 30rpx 35rpx;
	margin-bottom: 10rpx;
}
.left-nearby-img-box {
	width: 90rpx;
	height: 90rpx;
	border-radius: 8rpx;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 27rpx;
}
.left-nearby-img-box image {
	width: 100%;
	height: 100%;
}
.right-content {
	width: 100%;
	display: flex;
	justify-content: space-between
}
.right-l-title {
	width: 100%;
}
.title {
	font-size: 32rpx;
	line-height: 32rpx;
	color: #1C1C1C;
	font-weight: bold;
}
.desc {
	font-size: 28rpx;
	line-height: 28rpx;
	color: #EB0000;
	font-weight: 500;
	margin-top: 27rpx;
}
</style>
